<!DOCTYPE html>
<html lang="cn" ng-app="deepDRapp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DEEP DR</title>

  <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.slim.js"></script>
  <script src="http://cdn.bootcss.com/tether/1.4.0/js/tether.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script src="http://cdn.bootcss.com/angular.js/1.6.5/angular.min.js"></script>
  <script src="http://cdn.bootcss.com/angular.js/1.6.5/angular-route.min.js"></script>
  <script src="/asserts/index.js"></script>


</head>
<body>
<div ng-controller="appController" data-ng-init="init()">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded sticky-top">
    <!-- <div class="container container-fluid" > -->
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
              data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
              aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">DR标记</a>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#" ng-click="set_menu_item('anno')">开始标记 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" ng-click="set_menu_item('list')">标记记录</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">统计信息</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="User Name" ng-show="!LogedIn"
                 ng-model="usrname">
          <input class="form-control mr-sm-2" type="password" placeholder="Password" ng-show="!LogedIn"
                 ng-model="psw">
          <a class="btn btn-outline-success my-2 my-sm-0" type="button" ng-show="!LogedIn" ng-click='login()'>Login</a>
        </form>
        <a class="nav-link disabled" href="#" ng-show="LogedIn">用户： {{usrname}} 已登陆</a>
        <a class="nav-link" ng-show="LogedIn">退出登录</a>
      </div>
    <!-- </div> -->
  </nav>

  <style type="text/css">
    .left {
      position: fixed;
      top: 120px;
      bottom: 0;
    }
    .fixed3 {
      position: fixed;
      top: 60px;
      left: 20px;
    }
  </style>
  <!-- <div class="container container-fluid" > -->
  <div class="" >
    <div class="row" ng-show="menuItem=='anno'">
      <div class="fixed3">
        病人信息——
        年龄：{{sessions[0].PatientInfo.Age}}
        ——
        性别：{{sessions[0].PatientInfo.Gender==0?'男':'女'}}
        ——
        视力：{{sessions[0].PatientInfo.EyeSightLefe}}/{{sessions[0].PatientInfo.EyeSightRight}}
      </div>
      <div class="col-lg-7  left">
          <img class="media-object" ng-src="{{sessions[0].Images[currentImg].Data}}" style="max-width: 100%;max-height: 100%;" alt="未登录，请登录查看图片！">
      </div>
      <div class="col-lg-7">
      </div>

      <div class="col-lg-5">
        <h4 class="media-heading">病变类型标注</h4>
        <style type="text/css">
          .tg td {
            font-family: Arial, sans-serif;
            /*font-size: 18px;*/
            padding: 10px 5px;
            border-style: solid;
            border-width: 0px;
            /*overflow: hidden;*/
            word-break: normal;
            border-color: #aabcfe;
            color: #669;
            background-color: #e8edff;
            border-top-width: 1px;
            border-bottom-width: 1px;
          }

          .tg th {
            font-family: Arial, sans-serif;
            /*font-size: 18px;*/
            font-weight: normal;
            padding: 10px 5px;
            border-style: solid;
            border-width: 0px;
            word-break: normal;
            border-color: #aabcfe;
            color: #039;
            background-color: #b9c9fe;
            border-top-width: 1px;
            border-bottom-width: 1px;
          }
          li {
            padding: 1px 1px;
          }
          .tg .tg-baqh {
            text-align: center;
            vertical-align: top
          }

          .tg .tg-j0tj {
            background-color: #D2E4FC;
            text-align: center;
            vertical-align: top
          }

          li.active {
              background: #acc5df;
          }
        </style>
        <table class="tg">
          <tr>
            <th class="tg-s6z2">病变/象限</th>
            <th class="tg-baqh">一象限</th>
            <th class="tg-baqh">二象限</th>
            <th class="tg-baqh">三象限</th>
            <th class="tg-baqh">四象限</th>
          </tr>
          <tr>
            <td class="tg-baqh">软性渗出</td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[0][0]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[0][1]"></td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[0][2]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[0][3]"></td>
          </tr>
          <tr>
            <td class="tg-baqh">硬性渗出</td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[1][0]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[1][1]"></td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[1][2]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[1][3]"></td>
          </tr>
          <tr>
            <td class="tg-baqh">出血</td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[2][0]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[2][1]"></td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[2][2]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[2][3]"></td>
          </tr>
          <tr>
            <td class="tg-baqh">微血管瘤</td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[3][0]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[3][1]"></td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[3][2]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[3][3]"></td>
          </tr>
          <tr>
            <td class="tg-baqh">血管异常</td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[4][0]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[4][1]"></td>
            <td class="tg-j0tj"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[4][2]"></td>
            <td class="tg-baqh"><input type="checkbox" class="lesionarr" ng-model="currentAnno[currentImg].lesionArr[4][3]"></td>
          </tr>
        </table>
        <div class="panel panel-default">
          <div class="panel-heading"><h4>病变分级</h4></div>
          <div class="panel-body">
            <div class="container">
              <div class="well well-sm ">
                <div class="btn-group">
                  <label class="btn btn-success {{currentAnno[currentImg].level==0 ? 'active':''}}" ng-click="currentAnno[currentImg].level=0">
                    <span class="glyphicon glyphicon-ok">无DR{{currentAnno[currentImg].level==0 ? '*':''}}</span>
                  </label>
                  <label class="btn btn-success {{currentAnno[currentImg].level==1 ? 'active':''}}" ng-click="currentAnno[currentImg].level=1">
                    <span class="glyphicon glyphicon-ok">轻度{{currentAnno[currentImg].level==1 ? '*':''}}</span>
                  </label>
                  <label class="btn btn-success {{currentAnno[currentImg].level==2 ? 'active':''}}" ng-click="currentAnno[currentImg].level=2">
                    <span class="glyphicon glyphicon-ok">中度{{currentAnno[currentImg].level==2 ? '*':''}}</span>
                  </label>
                  <label class="btn btn-success {{currentAnno[currentImg].level==3 ? 'active':''}}" ng-click="currentAnno[currentImg].level=3">
                    <span class="glyphicon glyphicon-ok">重度{{currentAnno[currentImg].level==3 ? '*':''}}</span>
                  </label>
                  <label class="btn btn-success {{currentAnno[currentImg].level==4 ? 'active':''}}" ng-click="currentAnno[currentImg].level=4">
                    <span class="glyphicon glyphicon-ok">PDR{{currentAnno[currentImg].level==4 ? '*':''}}</span>
                  </label>
                  <label class="btn btn-success {{currentAnno[currentImg].level==100 ? 'active':''}}" ng-click="currentAnno[currentImg].level=100">
                    <span class="glyphicon glyphicon-ok">无法分级{{currentAnno[currentImg].level==100 ? '*':''}}</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div class="card card-block" id="quality">
          <div class="card-title"><h4>图片质量</h4></div>
          <div class="card-text">
            <h5>清晰度 + </h5>
            <div id="clearBox">
              <ul class="">
                <li ng-repeat='item in clearList'
                  class="{{currentAnno[currentImg].clearCurrent==item.id? 'active':''}}"
                  ng-click='clearChange($index+1)'>{{item.desp}}({{item.score}}分)
                </li>
              </ul>
            </div>
          </div>

          <div class="card-text">
            <h5>位置 + </h5>
            <div id="positionBox">
              <ul class="">
                <li ng-repeat='item in positionList'
                  class="{{currentAnno[currentImg].positionCurrent==item.id? 'active':''}}"
                  ng-click='positionChange($index+1)'>{{item.desp}}({{item.score}}分)
                </li>
              </ul>
            </div>
          </div>

          <div class="card-text">
            <h5>伪影 + </h5>
            <div id="artifactBox">
              <ul class="">
                <li ng-repeat='item in artifactList'
                  class="{{currentAnno[currentImg].artifactCurrent==item.id? 'active':''}}"
                  ng-click='artifactChange($index)'>{{item.desp}}({{item.score}}分)
                </li>
              </ul>
            </div>
          </div>

          <div class="card-text" ng-show='currentAnno[currentImg].artifactCurrent>0'>
            <h5>伪影性质判定 + </h5>
            <div id="artifactTypeBox">
              <ul class="">
                <li ng-repeat='item in artifactTypeList'
                  class="{{currentAnno[currentImg].artifactTypeCurrent[$index]==1 ? 'active':''}}"
                  ng-click='artifactTypeChange($index)'>{{item.desp}}
                </li>
              </ul>
            </div>
          </div>

          <div class="card-text">
            <h5>图片质量分级判定</h5>
            <p>
              得分:{{scoreCurrent}}{{scoreShortDesp[despCurrent]}}
            </p>
            <p>{{scoreDesp[despCurrent]}}</p>
          </div>

        </div>

        <div class="card-text">
          <button class="btn btn-default" ng-click="nextImg(-1)">此病人上一张图片</button>
          <a>{{currentImg+1}}/{{sessions[0].Images.length}}</a>
          <button class="btn btn-default" ng-click="nextImg(1)">此病人下一张图片</button>
        </div>
        <button class="btn btn-default" ng-click="submitAndNext()">提交诊断</button>
      </div>
    </div>
  </div>

  <div ng-show="menuItem=='list'">
    <table class="tg">
      <tr>
        <th>Id</th>
        <th>Image</th>
        <th>Person</th>
        <th>Lesion_ha</th>
        <th>Lesion_ma</th>
        <th>Lesion_sex</th>
        <th>Lesion_hex</th>
        <th>Artifact</th>
        <th>Position</th>
        <th>Clear</th>
        <th>Level</th>
        <th>ArtifactType</th>
      </tr>
      <tr ng-repeat="rec in doneList">
        <td>{{rec.Id}}</td>
        <td>{{rec.Image}}</td>
        <td>{{rec.Person}}</td>
        <td>{{rec.Lesion_ha}}</td>
        <td>{{rec.Lesion_ma}}</td>
        <td>{{rec.Lesion_sex}}</td>
        <td>{{rec.Lesion_hex}}</td>
        <td>{{rec.Artifact}}</td>
        <td>{{rec.Position}}</td>
        <td>{{rec.Clear}}</td>
        <td>{{rec.Level}}</td>
        <td>{{rec.ArtifactType}}</td>
      </tr>
    </table>
  </div>

  <div ng-show="menuItem=='debug'">
    <a class="btn" ng-click="getImgList(0,10)">Click</a>
  </div>

</div>
</body>
</html>


